<!--文件上传组-->
<template>
  <div class="upload-image-group">
    <upload-image
      class="img"
      v-for="(val, key) in groups"
      :key="val.filePath || key"
      :value="val"
      :accept="accept"
      :file-name="fileName"
      :type="type"
      @input="handleInput"></upload-image>
    <span class="num">{{value.length}} / {{max}}</span>
  </div>
</template>

<script>
  import UploadImage from '../upload-image/upload-image'
  export default {
    name: 'upload-image-group',
    props: {
      value: {type: Array, default: () => []},
      max: {type: Number, default: 3},
      accept: {type: String, default: 'image/*'},
      fileName: {type: null, default: ''},
      type: {type: null, default: ''}
    },
    components: {UploadImage},
    computed: {
      groups: {
        get() {
          if (this.value.length >= this.max) {
            return this.value
          } else {
            return this.value.concat([''])
          }
        }
      }
    },
    data() {
      return {
        show: true
      }
    },
    methods: {
      handleInput(n, o) {
        const value = this.value.slice(0)
        const index = value.findIndex(item => o && item.filePath === o.filePath)
        if (index !== -1) {
          if (!n) {
            // 删除操作
            value.splice(index, 1)
          } else {
            value.splice(index, 1, n)
          }
        } else {
          value.push(n)
        }
        this.$emit('input', value)
      }
    }
  }
</script>

<style scoped lang="scss">
  .upload-image-group{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .img{
    width: 2rem;
    margin: .1rem;
  }
  .num{
    display: inline-block;
    padding: 0 .15rem;
  }
</style>
